<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伸缩布局justify-content属性</title>
    <!-- 
        伸缩布局
        1.主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
        2.侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
        3.方向：默认主轴从左向右，侧轴默认从上到下
        4.主轴和侧轴并不是固定不变的，通过flex-direction可以互换
        5.一旦父元素设置了display: flex，则开启了伸缩布局，父元素中每一个子元素变成伸缩项，不再区分行内元素和块级元素 
    -->
    <style>
        /* -------------------------- justify-content -------------------------- */
        .box1{
            width: 500px;
            height: 300px;
            background-color: lightblue;

            /* 开启伸缩布局 */
            display: flex;
            /* justify-content调整主轴对齐（水平对齐） , 子盒子如何在父盒子里面水平对齐方式 */
            /* 水平方向 内容居中center , 两边贴边space-between , 两边有间距space-around */
            justify-content: space-around;
        }

        .box1 .item1{
            width: 50px;
            height: 200px;
            border: 1px solid black;
            background-color: lightcoral;
        }


        /* -----------------------------  align-items ------------------------------ */
        .box2{
            width: 500px;
            height: 300px;
            background-color: lightblue;

            display: flex;
            /* align-items  调整侧轴对齐（垂直对齐）, 子盒子如何在父盒子里面垂直对齐（单行） */
            align-items: flex-start;  /* 垂直方向 内容居中center ，侧轴方向上顶对齐flex-start */
        }

        .box2 .item2{
            width: 100px;
            height: 50px;
            border: 1px solid black;
            background-color: lightcoral;
        }


        /* -----------------------------  align-content ------------------------------ */
        .box3{
            width: 500px;
            height: 300px;
            background-color: lightblue;

            /* 前提：这样这个align-content属性的设置才会起作用
                   1.必须对父元素设置自由盒属性  display:flex;  
                   2.并且设置排列方式为横向排列  flex-direction:row;  
                   3.并且设置换行               flex-wrap:wrap;   

               align-content（由flex-wrap产生的独立行）多行垂直对齐方式
               align-content是针对flex容器里面多轴(多行)的情况，align-items是针对一行的情况进行排列。    
            */
            display: flex;
            flex-flow: row wrap;
            /* 垂直方向 内容居中center , 两边贴边space-between , 两边右间距space-around */
            align-content: space-around;
        }

        .box3 .item3{
            width: 100px;
            height: 50px;
            border: 1px solid black;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    justify-content：
    <div class="box1">
        <span class="item1">1</span>
        <span class="item1">2</span>
        <span class="item1">3</span>
        <span class="item1">4</span>
        <span class="item1">5</span>
    </div>

    <br><br><br>

    align-items：
    <div class="box2">
        <span class="item2">1</span>
        <span class="item2">2</span>
        <span class="item2">3</span>
        <span class="item2">4</span>
        <span class="item2">5</span>
        <span class="item2">6</span>
    </div>

    <br><br><br>

    align-content：
    <div class="box3">
        <span class="item3">1</span>
        <span class="item3">2</span>
        <span class="item3">3</span>
        <span class="item3">4</span>
        <span class="item3">5</span>
        <span class="item3">6</span>
    </div>
</body>
</html>